<template>
    <DocSectionText v-bind="$attrs"></DocSectionText>
    <div class="grid grid-cols-12 gap-4">
        <div class="col-span-12 sm:col-span-6 md:col-span-3">
            <div class="card">
                <NuxtLink to="/vite">
                    <span class="images">
                        <svg width="63" height="63" viewBox="0 0 63 63" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g id="vite" clip-path="url(#clip0_3_57)">
                                <path
                                    id="Vector"
                                    d="M32.0549 12.9123L32.0549 12.9123L59.3263 7.86786C60.152 7.71512 60.8175 8.61497 60.3885 9.39371C60.3885 9.39372 60.3885 9.39373 60.3885 9.39375L32.5644 59.887C32.1791 60.5862 31.1958 60.5902 30.8048 59.8945C30.8048 59.8945 30.8048 59.8945 30.8047 59.8945L2.42899 9.39495C1.99227 8.61774 2.655 7.71063 3.48355 7.86092C3.48355 7.86092 3.48355 7.86092 3.48355 7.86092L31.3374 12.9136L31.4267 12.4216L31.3374 12.9136C31.5747 12.9566 31.8176 12.9562 32.0549 12.9123Z"
                                    stroke="var(--text-secondary-color)"
                                />
                                <path
                                    id="Vector_2"
                                    d="M24.2017 5.3266L24.2017 5.3266C24.0911 5.34859 24.0014 5.44626 23.9939 5.57298L24.2017 5.3266ZM24.2017 5.3266L44.7924 1.23202C44.9675 1.19721 45.1441 1.36539 45.0858 1.57068L41.2344 15.1203C40.9796 16.0167 41.7473 16.8966 42.6812 16.7138L42.6813 16.7138L48.5822 15.558C48.775 15.5203 48.9623 15.7301 48.8571 15.9431L48.8571 15.9432L32.0907 49.9002L31.8017 50.3534L31.8017 50.3535C31.7534 50.4293 31.7021 50.4571 31.6608 50.4683C31.6134 50.4813 31.5538 50.4788 31.4938 50.4538C31.4338 50.4288 31.3876 50.3873 31.3609 50.341C31.3371 50.2998 31.3197 50.24 31.3381 50.1499L31.3381 50.1499L34.0448 36.8548C34.2339 35.9264 33.3724 35.1027 32.4474 35.3876L32.4472 35.3877L28.9065 36.4794C28.7341 36.5325 28.5407 36.38 28.5834 36.1681L30.2866 27.7041C30.2866 27.704 30.2866 27.704 30.2866 27.704C30.4661 26.8122 29.6748 26.0058 28.7717 26.2172L28.7716 26.2172L23.0389 27.5599C23.0389 27.5599 23.0389 27.5599 23.0389 27.5599C22.8827 27.5964 22.7164 27.4709 22.7273 27.2827C22.7273 27.2827 22.7273 27.2827 22.7273 27.2827L23.9939 5.57303L24.2017 5.3266Z"
                                    stroke="var(--text-secondary-color)"
                                />
                            </g>
                            <defs>
                                <clipPath id="clip0_3_57">
                                    <rect width="62" height="62" fill="white" transform="translate(0.392822 0.5)" />
                                </clipPath>
                            </defs>
                        </svg>
                        <svg width="63" height="63" viewBox="0 0 63 63" fill="none" xmlns="http://www.w3.org/2000/svg" class="original">
                            <g id="vite" clip-path="url(#clip0_1_67)">
                                <path
                                    id="Vector"
                                    d="M60.8263 9.63502L33.0022 60.1283C32.4278 61.1707 30.9519 61.1769 30.3688 60.1395L1.99297 9.63989C1.35772 8.50935 2.3103 7.13997 3.57267 7.36895L31.4265 12.4216C31.6042 12.4538 31.7861 12.4535 31.9638 12.4207L59.2352 7.3762C60.4933 7.14348 61.4504 8.50226 60.8263 9.63502Z"
                                    fill="url(#paint0_linear_1_67)"
                                />
                                <path
                                    id="Vector_2"
                                    d="M44.6949 0.741624L24.1042 4.8362C23.7658 4.9035 23.5152 5.19456 23.4948 5.54386L22.2282 27.2536C22.1984 27.765 22.6611 28.1618 23.1529 28.0467L28.8856 26.7041C29.422 26.5785 29.9066 27.058 29.7964 27.6054L28.0932 36.0694C27.9786 36.6391 28.5056 37.1262 29.0538 36.9572L32.5946 35.8655C33.1435 35.6964 33.671 36.1848 33.5548 36.755L30.8481 50.0501C30.6788 50.8818 31.7688 51.3353 32.2233 50.6222L32.527 50.146L49.3054 16.1645C49.5864 15.5956 49.1018 14.9468 48.4861 15.0674L42.5852 16.2231C42.0307 16.3316 41.5589 15.8076 41.7154 15.257L45.5668 1.7073C45.7234 1.15579 45.25 0.631249 44.6949 0.741624Z"
                                    fill="url(#paint1_linear_1_67)"
                                />
                            </g>
                            <defs>
                                <linearGradient id="paint0_linear_1_67" x1="1.30015" y1="5.5644" x2="36.5943" y2="52.7953" gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#41D1FF" />
                                    <stop offset="1" stop-color="#BD34FE" />
                                </linearGradient>
                                <linearGradient id="paint1_linear_1_67" x1="29.8279" y1="1.85329" x2="36.2756" y2="45.4365" gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#FFEA83" />
                                    <stop offset="0.0833333" stop-color="#FFDD35" />
                                    <stop offset="1" stop-color="#FFA800" />
                                </linearGradient>
                                <clipPath id="clip0_1_67">
                                    <rect width="62" height="62" fill="white" transform="translate(0.392822 0.5)" />
                                </clipPath>
                            </defs>
                        </svg>
                    </span>
                    <span class="title">VITE</span>
                </NuxtLink>
            </div>
        </div>
        <div class="col-span-12 sm:col-span-6 md:col-span-3">
            <div class="card">
                <NuxtLink to="/nuxt">
                    <span class="images">
                        <svg width="95" height="63" viewBox="0 0 95 63" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M52.9726 62.5H87.3826C88.4807 62.5001 89.5316 62.1142 90.4826 61.57C91.4335 61.0258 92.4138 60.3426 92.9626 59.4C93.5114 58.4574 93.8931 57.388 93.8926 56.2997C93.8921 55.2114 93.5122 54.1424 92.9626 53.2002L69.7126 13.21C69.1638 12.2676 68.4933 11.5841 67.5426 11.04C66.5918 10.4959 65.2305 10.11 64.1326 10.11C63.0347 10.11 61.9833 10.4959 61.0326 11.04C60.0818 11.5841 59.4114 12.2676 58.8626 13.21L52.9726 23.44L41.1926 3.59927C40.6433 2.65693 39.9736 1.66402 39.0226 1.12C38.0716 0.575977 37.0206 0.5 35.9226 0.5C34.8245 0.5 33.7736 0.575977 32.8226 1.12C31.8716 1.66402 30.8918 2.65693 30.3426 3.59927L1.51258 53.2002C0.962942 54.1424 0.893056 55.2114 0.892579 56.2997C0.892101 57.388 0.963769 58.4572 1.51258 59.3999C2.06139 60.3425 3.04164 61.0258 3.99258 61.57C4.94352 62.1142 5.99449 62.5001 7.09258 62.5H28.7926C37.3909 62.5 43.6494 58.6429 48.0126 51.34L58.5526 33.05L64.1326 23.44L81.1826 52.58H58.5526L52.9726 62.5ZM28.4826 52.58H13.2926L35.9226 13.52L47.3926 33.05L39.7949 46.2947C36.8973 51.0331 33.5938 52.58 28.4826 52.58Z"
                                stroke="var(--text-secondary-color)"
                            />
                        </svg>
                        <svg width="94" height="63" viewBox="0 0 94 63" fill="none" xmlns="http://www.w3.org/2000/svg" class="original">
                            <g id="nuxt">
                                <path
                                    id="Triangles"
                                    d="M52.9728 62.5H87.3828C88.4809 62.5001 89.5319 62.1142 90.4828 61.57C91.4338 61.0258 92.414 60.3426 92.9628 59.4C93.5116 58.4574 93.8933 57.388 93.8928 56.2997C93.8923 55.2114 93.5125 54.1424 92.9628 53.2002L69.7128 13.21C69.164 12.2676 68.4936 11.5841 67.5428 11.04C66.5921 10.4959 65.2307 10.11 64.1328 10.11C63.035 10.11 61.9836 10.4959 61.0328 11.04C60.0821 11.5841 59.4116 12.2676 58.8628 13.21L52.9728 23.44L41.1928 3.59927C40.6436 2.65693 39.9738 1.66402 39.0228 1.12C38.0718 0.575977 37.0209 0.5 35.9228 0.5C34.8248 0.5 33.7738 0.575977 32.8228 1.12C31.8718 1.66402 30.8921 2.65693 30.3428 3.59927L1.51282 53.2002C0.963186 54.1424 0.893301 55.2114 0.892823 56.2997C0.892345 57.388 0.964013 58.4572 1.51282 59.3999C2.06163 60.3425 3.04188 61.0258 3.99282 61.57C4.94376 62.1142 5.99473 62.5001 7.09282 62.5H28.7928C37.3912 62.5 43.6496 58.6429 48.0128 51.34L58.5528 33.05L64.1328 23.44L81.1828 52.58H58.5528L52.9728 62.5ZM28.4828 52.58H13.2928L35.9228 13.52L47.3928 33.05L39.7951 46.2947C36.8976 51.0331 33.594 52.58 28.4828 52.58Z"
                                    fill="#00DC82"
                                />
                            </g>
                        </svg>
                    </span>
                    <span class="title">NUXT</span>
                </NuxtLink>
            </div>
        </div>
        <div class="col-span-12 sm:col-span-6 md:col-span-3">
            <div class="card flex-1">
                <NuxtLink to="/cdn">
                    <span class="images">
                        <svg width="55" height="60" viewBox="0 0 55 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M0.59082 0.0688477H54.3064L49.3794 53.166L27.1685 59.2714L5.51761 53.6348L0.59082 0.0688477ZM1.68702 1.06885L6.44909 52.844L27.1614 58.2362L48.4475 52.3851L53.2093 1.06885H1.68702ZM9.62573 10.0733H45.1308L44.3146 17.6229H18.3298L18.8344 23.5266H43.8817L41.9722 44.7773L27.4625 48.6181L12.8914 44.7772L11.9306 33.4396H19.7175L20.1987 38.7929L27.4612 40.6224L34.6048 38.795L35.2392 31.0762H11.5463L9.62573 10.0733ZM10.7213 11.0733L12.4591 30.0762H36.3248L35.5431 39.5872L27.4631 41.6541L19.2662 39.5892L18.8033 34.4396H13.0189L13.8283 43.99L27.4619 47.5838L41.0389 43.9899L42.7878 24.5266H17.9162L17.2407 16.6229H43.4169L44.0169 11.0733H10.7213Z"
                                fill="var(--text-secondary-color)"
                            />
                        </svg>
                        <svg width="63" height="63" viewBox="0 0 63 63" fill="none" xmlns="http://www.w3.org/2000/svg" class="original">
                            <g id="Frame" clip-path="url(#clip0_3_69)">
                                <path id="Vector" d="M8.91734 54.595L3.99609 0.5H58.8661L53.8286 54.5562L31.3536 60.5625" fill="#E44D26" />
                                <path id="Vector_2" d="M31.3926 55.9512V4.91748H53.8288L49.5663 51.0687" fill="#F16529" />
                                <path id="Vector_3" d="M14.1489 11.5437H31.3927V18.17H21.7052L22.3252 24.9512H31.3927V31.5775H16.0089L14.1489 11.5437ZM16.3189 34.91H23.2552L23.7589 40.2187L31.4314 42.1562V49.1312L17.3264 45.3337" fill="#EBEBEB" />
                                <path id="Vector_4" d="M48.559 11.5437H31.3928V18.17H47.9778L48.5978 11.5825L48.559 11.5437ZM47.319 24.9512H31.354V31.5775H39.8403L39.0265 40.2187L31.354 42.1562V49.0925L45.4203 45.3337" fill="white" />
                            </g>
                            <defs>
                                <clipPath id="clip0_3_69">
                                    <rect width="62" height="62" fill="white" transform="translate(0.392578 0.5)" />
                                </clipPath>
                            </defs>
                        </svg>
                    </span>
                    <span class="title">CDN</span>
                </NuxtLink>
            </div>
        </div>
        <div class="col-span-12 sm:col-span-6 md:col-span-3">
            <div class="card flex-1">
                <NuxtLink to="/laravel">
                    <span class="images">
                        <svg width="62" height="63" viewBox="0 0 62 63" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M61.065 14.527C61.0584 14.4981 61.0406 14.4737 61.0317 14.4448C61.0117 14.3937 60.9962 14.3404 60.9695 14.2937C60.9517 14.2626 60.9251 14.2359 60.9028 14.207C60.874 14.1693 60.8495 14.127 60.8162 14.0937C60.7873 14.0648 60.7517 14.0448 60.7206 14.0204C60.6851 13.9915 60.654 13.9604 60.614 13.9382L48.959 7.22742C48.6591 7.05409 48.2902 7.05409 47.9902 7.22742L36.3353 13.9382C36.2953 13.9604 36.2642 13.9937 36.2286 14.0204C36.1975 14.0448 36.1619 14.0648 36.1331 14.0937C36.0997 14.127 36.0753 14.1693 36.0464 14.207C36.0242 14.2359 35.9975 14.2626 35.9797 14.2937C35.9531 14.3404 35.9353 14.3937 35.9175 14.4448C35.9064 14.4715 35.8908 14.4981 35.8842 14.527C35.862 14.6092 35.8509 14.6937 35.8509 14.7803V27.5263L26.138 33.1194V8.18292C26.138 8.09626 26.1269 8.01182 26.1047 7.9296C26.098 7.90071 26.0803 7.87627 26.0714 7.84738C26.0514 7.79627 26.0358 7.74294 26.0092 7.69628C25.9914 7.66517 25.9647 7.63851 25.9425 7.60962C25.9136 7.57184 25.8892 7.52962 25.8558 7.49629C25.8269 7.4674 25.7914 7.4474 25.7603 7.42296C25.7247 7.39407 25.6936 7.36296 25.6536 7.34074L13.9987 0.629993C13.6987 0.456669 13.3298 0.456669 13.0299 0.629993L1.37493 7.34074C1.33493 7.36296 1.30382 7.3963 1.26827 7.42296C1.23716 7.4474 1.2016 7.4674 1.17272 7.49629C1.13939 7.52962 1.11494 7.57184 1.08605 7.60962C1.06383 7.63851 1.03717 7.66517 1.01939 7.69628C0.992728 7.74294 0.974949 7.79627 0.957173 7.84738C0.946062 7.87405 0.930509 7.90071 0.923842 7.9296C0.901621 8.01182 0.890511 8.09626 0.890511 8.18292V48.1052C0.890511 48.4519 1.07717 48.7741 1.37715 48.9474L24.6892 62.3689C24.7403 62.3978 24.7959 62.4156 24.8492 62.4356C24.8737 62.4444 24.8981 62.46 24.9248 62.4667C25.007 62.4889 25.0892 62.5 25.1736 62.5C25.2581 62.5 25.3403 62.4889 25.4225 62.4667C25.4447 62.46 25.4647 62.4467 25.487 62.44C25.5447 62.42 25.6025 62.4 25.6558 62.3711L48.9679 48.9496C49.2701 48.7763 49.4546 48.4563 49.4546 48.1074V35.3615L60.6229 28.9307C60.9251 28.7574 61.1095 28.4374 61.1095 28.0885V14.7803C61.0984 14.6937 61.085 14.6092 61.065 14.527ZM25.1559 46.9875L15.4608 41.5011L25.6425 35.6392L36.813 29.2085L46.5169 34.7948L39.3973 38.859L25.1559 46.9875ZM47.4991 22.0533V33.1194L43.4193 30.7706L37.7841 27.5263V16.4603L41.8639 18.809L47.4991 22.0533ZM48.4702 9.18953L58.1785 14.7803L48.4702 20.3712L38.7618 14.7803L48.4702 9.18953ZM18.554 37.4813L14.4742 39.8301V15.4559L20.1095 12.2116L24.1893 9.86283V34.2349L18.554 37.4813ZM13.5032 2.59433L23.2115 8.18514L13.5032 13.776L3.7948 8.18514L13.5032 2.59433ZM2.81707 9.86283L6.89685 12.2116L12.5321 15.4559V41.5078V41.51V41.5122C12.5321 41.55 12.5432 41.5856 12.5477 41.6211C12.5543 41.6678 12.5543 41.7167 12.5677 41.7633V41.7656C12.5788 41.8033 12.5988 41.8389 12.6143 41.8744C12.6321 41.9144 12.6432 41.9589 12.6654 41.9967C12.6654 41.9967 12.6654 41.9989 12.6677 41.9989C12.6877 42.0322 12.7165 42.0611 12.741 42.0922C12.7677 42.1278 12.7899 42.1633 12.821 42.1944L12.8232 42.1966C12.8499 42.2233 12.8854 42.2433 12.9165 42.2678C12.9521 42.2944 12.9832 42.3255 13.021 42.3477C13.0232 42.3477 13.0232 42.3477 13.0254 42.35C13.0276 42.35 13.0276 42.3522 13.0299 42.3522L24.1937 48.6696V59.8446L2.81707 47.543V9.86283ZM47.4991 47.543L26.1292 59.8468V48.6696L41.955 39.6346L47.4991 36.4703V47.543ZM59.154 27.5263L49.4412 33.1194V22.0533L55.0765 18.809L59.1563 16.4603V27.5263H59.154Z"
                                stroke="var(--text-secondary-color)"
                            />
                        </svg>

                        <svg width="62" height="63" viewBox="0 0 62 63" fill="none" xmlns="http://www.w3.org/2000/svg" class="original">
                            <path
                                d="M61.0652 14.527C61.0585 14.4981 61.0407 14.4737 61.0318 14.4448C61.0118 14.3937 60.9963 14.3404 60.9696 14.2937C60.9518 14.2626 60.9252 14.2359 60.903 14.207C60.8741 14.1693 60.8496 14.127 60.8163 14.0937C60.7874 14.0648 60.7519 14.0448 60.7207 14.0204C60.6852 13.9915 60.6541 13.9604 60.6141 13.9382L48.9591 7.22742C48.6592 7.05409 48.2903 7.05409 47.9903 7.22742L36.3354 13.9382C36.2954 13.9604 36.2643 13.9937 36.2287 14.0204C36.1976 14.0448 36.1621 14.0648 36.1332 14.0937C36.0998 14.127 36.0754 14.1693 36.0465 14.207C36.0243 14.2359 35.9976 14.2626 35.9799 14.2937C35.9532 14.3404 35.9354 14.3937 35.9176 14.4448C35.9065 14.4715 35.891 14.4981 35.8843 14.527C35.8621 14.6092 35.851 14.6937 35.851 14.7803V27.5263L26.1382 33.1194V8.18292C26.1382 8.09626 26.127 8.01182 26.1048 7.9296C26.0982 7.90071 26.0804 7.87627 26.0715 7.84738C26.0515 7.79627 26.0359 7.74294 26.0093 7.69628C25.9915 7.66517 25.9648 7.63851 25.9426 7.60962C25.9137 7.57184 25.8893 7.52962 25.8559 7.49629C25.8271 7.4674 25.7915 7.4474 25.7604 7.42296C25.7248 7.39407 25.6937 7.36296 25.6537 7.34074L13.9988 0.629993C13.6988 0.456669 13.33 0.456669 13.03 0.629993L1.37504 7.34074C1.33505 7.36296 1.30394 7.3963 1.26838 7.42296C1.23727 7.4474 1.20172 7.4674 1.17283 7.49629C1.1395 7.52962 1.11506 7.57184 1.08617 7.60962C1.06395 7.63851 1.03728 7.66517 1.01951 7.69628C0.992842 7.74294 0.975064 7.79627 0.957287 7.84738C0.946177 7.87405 0.930623 7.90071 0.923957 7.9296C0.901736 8.01182 0.890625 8.09626 0.890625 8.18292V48.1052C0.890625 48.4519 1.07728 48.7741 1.37726 48.9474L24.6893 62.3689C24.7405 62.3978 24.796 62.4156 24.8493 62.4356C24.8738 62.4444 24.8982 62.46 24.9249 62.4667C25.0071 62.4889 25.0893 62.5 25.1738 62.5C25.2582 62.5 25.3404 62.4889 25.4226 62.4667C25.4449 62.46 25.4649 62.4467 25.4871 62.44C25.5449 62.42 25.6026 62.4 25.656 62.3711L48.968 48.9496C49.2702 48.7763 49.4547 48.4563 49.4547 48.1074V35.3615L60.623 28.9307C60.9252 28.7574 61.1096 28.4374 61.1096 28.0885V14.7803C61.0985 14.6937 61.0852 14.6092 61.0652 14.527ZM25.156 46.9875L15.461 41.5011L25.6426 35.6392L36.8131 29.2085L46.5171 34.7948L39.3974 38.859L25.156 46.9875ZM47.4992 22.0533V33.1194L43.4194 30.7706L37.7842 27.5263V16.4603L41.864 18.809L47.4992 22.0533ZM48.4703 9.18953L58.1787 14.7803L48.4703 20.3712L38.7619 14.7803L48.4703 9.18953ZM18.5541 37.4813L14.4743 39.8301V15.4559L20.1096 12.2116L24.1894 9.86283V34.2349L18.5541 37.4813ZM13.5033 2.59433L23.2116 8.18514L13.5033 13.776L3.79491 8.18514L13.5033 2.59433ZM2.81719 9.86283L6.89697 12.2116L12.5322 15.4559V41.5078V41.51V41.5122C12.5322 41.55 12.5433 41.5856 12.5478 41.6211C12.5544 41.6678 12.5544 41.7167 12.5678 41.7633V41.7656C12.5789 41.8033 12.5989 41.8389 12.6144 41.8744C12.6322 41.9144 12.6433 41.9589 12.6655 41.9967C12.6655 41.9967 12.6655 41.9989 12.6678 41.9989C12.6878 42.0322 12.7167 42.0611 12.7411 42.0922C12.7678 42.1278 12.79 42.1633 12.8211 42.1944L12.8233 42.1966C12.85 42.2233 12.8855 42.2433 12.9166 42.2678C12.9522 42.2944 12.9833 42.3255 13.0211 42.3477C13.0233 42.3477 13.0233 42.3477 13.0255 42.35C13.0278 42.35 13.0278 42.3522 13.03 42.3522L24.1938 48.6696V59.8446L2.81719 47.543V9.86283ZM47.4992 47.543L26.1293 59.8468V48.6696L41.9551 39.6346L47.4992 36.4703V47.543ZM59.1542 27.5263L49.4413 33.1194V22.0533L55.0766 18.809L59.1564 16.4603V27.5263H59.1542Z"
                                fill="var(--text-secondary-color)"
                            />
                        </svg>
                    </span>
                    <span class="title">LARAVEL</span>
                </NuxtLink>
            </div>
        </div>
    </div>
</template>

<style scoped>
.card {
    padding: 0;
    min-height: 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    height: 100%;
}

.card .title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary-color);
    transition: all 0.5s;
}

.card .images {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card svg {
    height: 62px;
    opacity: 1;
    transition: all 0.5s;
}

.card svg.original {
    opacity: 0;
    margin-top: -62px;
}

.card:hover svg {
    opacity: 0;
}

.card:hover svg.original {
    opacity: 1;
}

.card:hover .title {
    color: var(--text-color);
}
</style>
